<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../css/public.css" media="all" rel="stylesheet">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form action="" class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" id="name" name="proName" type="text">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品型号</label>
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" id="version" name="version" type="text">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-primary" id="search" lay-filter="data-search-btn"
                                    lay-submit
                                    type="button"><i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script id="toolbarDemo" type="text/html">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除
                </button>
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="up">
                    上架
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="down">下架</button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script id="currentTableBar" type="text/html">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="attach">修改附件</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
        <script id="addform" type="text/html">
            <form class="layui-form" action="" lay-filter="empform">
                <input id="bid" name="proId" type="hidden">

                <div class="layui-form layuimini-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择商品一级分类</label>
                        <div class="layui-input-block">
                            <select id="first" name="firstName" lay-filter="first">

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择商品二级分类</label>
                        <div class="layui-input-block">
                            <select id="second" name="CategoryId">

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" lay-reqtext="商品名称不能为空"
                                   placeholder="请输入商品名称" value="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入商品价格</label>
                        <div class="layui-input-block">
                            <input type="number" name="price" placeholder="请输入商品价格" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入商品版本</label>
                        <div class="layui-input-block">
                            <input type="text" name="version" placeholder="请输入商品版本" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入商品颜色</label>
                        <div class="layui-input-block">
                            <input type="text" name="color" placeholder="请输入商品颜色" value=""
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-upload">
                            <button id="img" type="button" class="layui-btn">上传商品图片</button>
                        </div>
                        <input id="proHomePageImg"  type="hidden" name="firstimg">
                    </div>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test2">上传商品展示图</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="demo2"></div>
                        </blockquote>
                        <input id="ids" type="hidden" name="imgid"/>
                    </div>
                    <!--                    <input id="fileName" name="fileName" type="hidden">-->
                    <input id="proDelStatus" name="delStatus" type="hidden" value="0">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">是否上架</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="是" checked="">
                            <input type="radio" name="status" value="0" title="否">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" id="savebtn" class="layui-btn" value="确认保存"/>
                        </div>
                    </div>
                </div>
            </form>
            </form>    </script>
        <script id="edtAttachment" type="text/html">
            <form class="layui-form" action="" lay-filter="editAttach">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <input id="oneImg" type="hidden" name="firstimg">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test3">上传商品展示图</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo3"></div>
                    </blockquote>
                    <input id="editIds" type="hidden" name="imgid"/>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" id="edit" class="layui-btn" value="确认保存"/>
                    </div>
                </div>
            </form>
        </script>
    </div>
</div>
<script charset="utf-8" src="/../lib/layui-v2.6.3/layui.js"></script>
<script th:inline="none">
    layui.use(['form', 'table', 'upload', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            element = layui.element,
            table = layui.table;

        var uploadInst =  function uploadInst(){
            upload.render({
                elem: '#test1'
                ,url: '/product/homeImg' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    console.log(res.data.src);
                    layer.alert("上传成功");
                    $("#oneImg").val(res.data.src);
                    console.log($("#oneImg").val());
                }
                //进度条
                ,progress: function(n, elem, e){
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        }
        var uploadRender = function uploadRender() {

            upload.render({
                elem: "#img",
                url: "/product/homeImg",
                done: function (res) {
                    layer.alert("上传成功");
                    $("#proHomePageImg").val(res.data.src);
                }
            });
        }
        var editAttach = function editAttach(data) {
            $.post("/attachment/editAttach", {id: data.id}, function (attach) {
                // console.log(attach);
                if (attach.code == 0) {
                    $("#demo3").html("");
                    $.each(attach.data, function (i, v) {
                        // console.log(v.id);
                        $('#demo3').append('<img imgId="' + v.id + '" width="50px" height="50px" src="/upload/' + v.path + '" alt="' + v.fileName + '" class="layui-upload-img">')

                    });
                    $.post("/product/edit",{id : data.id},function (pro){
                        $("#demo3").html("");
                        $('demo1').append('<img imgId="' + pro.data.id + '" width="50px" height="50px" src="/upload/' + pro.data.firstimg + '" alt="' + pro.data.name + '" class="layui-upload-img">')

                    });
                    $(".layui-upload-img").on("click", function () {
                        var id = $(this).attr("imgId");
                        layer.confirm('你真的要删这张照片吗？', function () {
                            $.post("/attachment/del", {id: id}, function () {
                                layer.msg("删除照片成功！");
                                editAttach(data);
                            });
                        });
                    });
                }
            });
        }
        var uploadRenders = function uploadRenders() {
            upload.render({
                elem: '#test2'
                , url: '/product/attach' //此处配置你自己的上传接口即可
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo2').append('<img width="50px" height="50px" src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , done: function (res) {

                    //从后端传来的数据之中有当前图片的id
                    var imgId = res.data.id;
                    //取出当前图片的id放入old
                    var old = $("#ids").val();
                    //多张图片上传为了不顶掉前面的id进行判断加,拼接
                    if (old != null && old != "") {
                        old += ",";
                    }
                    ;
                    old += imgId;
                    //完成拼接后再把最新的old的值塞入input框里
                    $("#ids").val(old);
                    layer.alert("上传成功");
                    //上传完毕
                }
            });
        }
        var uploadRender3 = function uploadRender3() {
            upload.render({
                elem: '#test3'
                , url: '/product/attach' //此处配置你自己的上传接口即可
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo3').append('<img width="50px" height="50px" src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , done: function (res) {

                    //从后端传来的数据之中有当前图片的id
                    var imgId = res.data.id;
                    //取出当前图片的id放入old
                    var old = $("#editIds").val();
                    //多张图片上传为了不顶掉前面的id进行判断加,拼接
                    if (old != null && old != "") {
                        old += ",";
                    }
                    ;
                    old += imgId;
                    //完成拼接后再把最新的old的值塞入input框里
                    $("#editIds").val(old);
                    layer.alert("上传成功");
                    //上传完毕
                }
            });
        }
        var secondaryLinkage=function secondaryLinkage() {
            $.get("/category/firstName",function(first) {
                $.each(first,function(i,v){
                    $("#first").append("<option value='"+v.id+"'>"+v.name+"</option>")
                });
                form.render();
            });
            form.on('select(first)', function () {
                var id=$("#first").val()
                // console.log(id);
                $("#second").empty();
                $.post("/category/second",{id:id},function (second) {
                    $.each(second,function(i,v){
                        // console.log(v);
                        $("#second").append("<option value='"+v.id+"'>"+v.name+"</option>")
                    });
                    form.render();
                });
            })
        }
        $("#search").on("click", function () {
            table.render({
                elem: '#currentTableId',
                url: '/product/listAll',
                toolbar: '#toolbarDemo',
                where: {name: $("#name").val(), version: $("#version").val()},
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {type: "checkbox", width: 50},
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'name', width: 150, title: '商品名'},
                    {field: 'price', width: 110, title: '商品价格', sort: true},
                    {field: 'version', width: 160, title: '商品型号'},
                    {field: 'color', title: '颜色', width: 80},
                    {field: 'status', width: 130, title: '是否上架', sort: true},
                    // {field: 'proStock', width: 80, title: '库存', sort: true},
                    {title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center"}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
        }).click();

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作

                layer.open({
                    type: 1,
                    content: $("#addform").html(), //把html放进script里
                    area: ['800px', '600px']
                });
                uploadRenders();
                uploadRender();
                form.render();
                $("#savebtn").on("click", function () {
                    var data = form.val("empform");
                    if (!data.name == null || data.name == "") {
                        layer.msg("用户名为空");
                        return false;
                    }
                    $.post("/product/save", data, function (result) {
                        if (result.code == 0) {
                            layer.closeAll();
                            $("#search").click();//点击刷新
                        } else {
                            layer.msg(result.msg);
                        }
                    });

                });

                secondaryLinkage();
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                var datas = [];
                $.each(data, function (i, v) {
                    datas[i] = v.id;
                });
                layer.confirm('你真的要删这些吗？', function () {
                    $.post("/product/removeByIds", {ids: datas}, function () {
                        layer.closeAll();
                        $("#search").click();//点击刷新
                    });
                });
            } else if (obj.event === 'up') {
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                var datas = [];
                $.each(data, function (i, v) {
                    datas[i] = v.id;
                });
                layer.confirm('全部上架？', function () {
                    $.post("/product/up", {ids: datas}, function () {
                        layer.closeAll();
                        $("#search").click();//点击刷新
                    });
                });
            } else if (obj.event === 'down') {
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                var datas = [];
                $.each(data, function (i, v) {
                    datas[i] = v.id;
                });
                layer.confirm('全部下架？', function () {
                    $.post("/product/down", {ids: datas}, function () {
                        layer.closeAll();
                        $("#search").click();//点击刷新
                    });
                });
            }
        });


        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                $.post("/product/edit", {id: obj.data.id}, function (s) {
                    if (s.code == 0) {
                        layer.open({
                            type: 1,
                            content: $("#addform").html(), //把html放进script里
                            area: ['800px', '600px']
                        });
                        uploadRenders();
                        uploadRender();
                        form.render();
                        $("#savebtn").on("click", function () {
                            var data = form.val("empform");
                            if (!data.name == null || data.name == "") {
                                layer.msg("用户名为空");
                                return false;
                            }
                            $.post("/product/save", data, function (result) {
                                if (result.code == 0) {
                                    layer.closeAll();
                                    $("#search").click();//点击刷新
                                } else {
                                    layer.msg("保存失败");
                                }
                            });
                        });
                        form.val("empform", s.data);
                    } else {
                        layer.msg(s.msg);
                    }
                });
                secondaryLinkage();
            } else if (obj.event === 'delete') {
                layer.confirm('你真的要删吗？', function () {
                    $.post("/product/del", {id: obj.data.id}, function () {
                        layer.closeAll();
                        $("#search").click();
                    });
                });
            } else if (obj.event === 'attach') {
                layer.open({
                    type: 1,
                    content: $("#edtAttachment").html(), //把html放进script里
                    area: ['800px', '600px']
                });
                uploadInst();
                uploadRender3();
                editAttach(data);
                form.render();
                $("#edit").on("click", function () {
                    var data = form.val("editAttach");
                    var ids=data.imgid;
                    obj.data.imgid=ids;
                    $.post("/attachment/save",obj.data, function (result) {
                        if (result.code == 0) {
                            layer.closeAll();
                            $("#search").click();//点击刷新
                        } else {
                            layer.msg(result.msg);
                        }
                    });
                });
            }
        });


    })
</script>

</body>
</html>